<template>
  <div class="app-container">
    <h1>课程列表</h1>
    <el-table
      :data="courseList"
      stripe>
      <el-table-column
        type="index">
      </el-table-column>
      <el-table-column
        label="课程封面"
        prop="cover"
        width="240px"
      >
        <template slot-scope="{row}">
          <img :src="row.cover" style="width: 240px;height: 135px">
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="课程名称"
      >
      </el-table-column>
      <el-table-column
        prop="teacher"
        label="课程讲师"
      >

      </el-table-column>
      <el-table-column
        prop="subject"
        label="分类"
      >

      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
      >
      </el-table-column>
      <el-table-column
        prop="buyCount"
        label="购买人数">
      </el-table-column>
      <el-table-column
        prop="viewCount"
        label="观看人数"
      >
      </el-table-column>
      <el-table-column
        label="操作" width="300px">
        <template slot-scope="{row}">
          <el-button size="mini" type="success" @click="uploadCourseClick(row.id)">课程更新</el-button>
          <el-button size="mini" type="success" @click="uploadChapterClick(row.id)">章节管理</el-button>
          <el-button size="mini" type="warning" @click="deleteCourseClick(row.id)">删除课程</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="pageSize"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>

  import * as CourseAPI from '../../api/course'

  export default {
    name: 'CourseList',
    data: function() {

      return {

        courseList:[],
        page:1,
        size:2,
        pageSize: [2,5,10],
        total: 0
      }
    },
    created() {

      this.loadCourseList();
    },
    methods:{

      async loadCourseList() {

        let response = await CourseAPI.findCourseList(this.page,this.size);

        this.courseList = response.list;
        this.total = response.total;
      },
      handleSizeChange(size) {

          this.size = size;

          this.loadCourseList()
      },
      handleCurrentChange(page) {

        this.page = page;

        this.loadCourseList()
      },
      uploadCourseClick(courseId) {

        this.$router.push({
          path:'/course/add',
          query:{
            courseId
          }
        })
      },
      uploadChapterClick(courseId) {

        this.$router.push({

          path:'/course/add',
          query:{
            courseId,
            active:1
          }
        })
      },
      deleteCourseClick(courseId) {



        this.$confirm('删除本课程, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {


          await CourseAPI.deleteCourseById(courseId);

          this.$message({
            type: 'success',
            message: '删除成功!'
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      }
    }
  }
</script>

<style scoped>

  .el-pagination {

    margin-top: 20px;
    text-align: center;
  }
</style>
